<template>
  <!-- 对话框配置项: 关闭时销毁, 可拖拽, 居中-->
  <el-dialog
    v-model="dialogs.event.manage"
    title="交通事件管理"
    destroy-on-close
    draggable
    center
    width="80%"
  >
    <!-- 按处理状态分类 -->
    <template v-if="GridTotal.length">
      <el-tabs v-model="activeStatus" @tab-click="handleClick">
        <el-tab-pane
          :label="'未处理(' + GridTotal[0].num + ')'"
          name="未处理"
        ></el-tab-pane>
        <el-tab-pane
          :label="'处理中(' + GridTotal[1].num + ')'"
          name="处理中"
        ></el-tab-pane>
        <el-tab-pane
          :label="'已处理(' + GridTotal[2].num + ')'"
          name="已处理"
        ></el-tab-pane>

        <el-tab-pane
          :label="'已忽略(' + GridTotal[3].num + ')'"
          name="已忽略"
        ></el-tab-pane>
      </el-tabs>
    </template>
    <br />
    <!-- 表格 -->
    <template v-if="GridData.length">
      <el-table :data="GridData">
        <el-table-column
          property="event_number"
          label="事件编号"
          fixed="left"
          width="150"
        />
        <el-table-column property="event_type" label="事件类型" width="150" />
        <el-table-column property="event_level" label="事件等级" width="150" />
        <el-table-column
          property="event_datetime"
          label="发生时间"
          width="150"
        />
        <el-table-column property="event_addr" label="发生地点" width="150" />
        <el-table-column
          property="event_describe"
          label="事件描述"
          width="200"
        />
        <el-table-column property="event_car" label="事件车辆" width="150" />
        <el-table-column property="user_truname" label="报告人" width="150" />
        <el-table-column property="user_phone" label="联系方式" width="150" />
        <el-table-column fixed="right" label="处理状态" width="120">
          <template #default="scope">
            <el-select
              v-model="activeStatus"
              class="m-2"
              @change="handleChange($event, scope.$index)"
            >
              <el-option label="未处理" value="未处理" />
              <el-option label="处理中" value="处理中" />
              <el-option label="已处理" value="已处理" />
              <el-option label="已忽略" value="已忽略" />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <br />
      <br />
      <!-- 分页器 -->
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 8, 10]"
        :small="false"
        :disabled="false"
        :background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </template>

    <template v-else>
      <el-empty
        :image-size="200"
        :description="'暂时没有' + activeStatus + '的交通事件!'"
      />
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted, toRefs, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import eventApi from '@/apis/event.js' //导入封装好的API
import { useDialogsStore } from '@/stores/dialogs' // 使用pinia
import { useMapStore } from '@/stores/map' // 使用pinia
const { dialogs } = useDialogsStore()
const { map } = toRefs(useMapStore())

const GridData = ref([])
const GridTotal = ref([])
const activeStatus = ref('未处理')
const currentPage = ref(1)
const pageSize = ref(5)
const pageTotal = ref(0)

// 修改处理状态
const handleChange = async (event, index) => {
  let updateId = GridData.value[index].event_id
  const data = {
    event_status: event
  }
  const res = await eventApi.putEventById(updateId, data)
  if (res.code) {
    getEventsChecked(activeStatus.value, currentPage.value, pageSize.value)
    getEventStatusTotal()
  } else {
    ElMessage({
      message: '事件处理状态修改失败!',
      type: 'success'
    })
  }
}

//从地图中移除事件点
// const handleRemoveFromMap = (index) => {
//   let removeEventLocation = GridData.value[index].event_location.split(',')

//   // 地图文档操作参数
//   let position = removeEventLocation
//   let service = { name: 'guanggu', layerId: 2 }
//   // 首次查询,判断是否已从地图中移除事件点
//   Point.queryByGeom({
//     position,
//     service,
//     callback: (data) => {
//       if (!data.TotalCount) {
//         // 1.如果已经移除
//         ElMessage({
//           showClose: true,
//           type: 'success',
//           message: '该事件已从地图上被移除了,无需二次操作!'
//         })
//       } else {
//         // 2.如果还未移除
//         dialogs.event.manage = false
//         // 飞行视角
//         map.value.getView().animate({
//           center: removeEventLocation,
//           zoom: 18,
//           duration: 500
//         })
//         // 提示框
//         ElMessageBox.confirm(
//           '此操作会将该事件标记点从地图上移除,确认继续操作?',
//           '注意',
//           {
//             confirmButtonText: '确认',
//             cancelButtonText: '返回',
//             type: 'warning',
//             draggable: true,
//             customStyle: { 'vertical-align': 'top', 'margin-top': '100px' }
//           }
//         )
//           .then(() => {
//             // 查询到要移除点的FID
//             Point.queryByGeom({
//               position,
//               service,
//               callback: (data) => {
//                 let fid = data.SFEleArray[0].FID
//                 // 根据FID删除地图文档要素
//                 DelFeature({
//                   fid,
//                   service,
//                   callback: (data) => {
//                     // 刷新地图文档图层
//                     let mapLayers = map.value.getLayers().getArray()
//                     mapLayers[mapLayers.length - 1].refresh()
//                     ElMessage({
//                       showClose: true,
//                       type: 'success',
//                       message: '移除成功!'
//                     })
//                     activeStatus.value = '已处理'
//                   }
//                 })
//               }
//             })
//           })
//           .catch((action) => {
//             dialogs.event.manage = true
//           })
//       }
//     }
//   })
// }

// 切换获取不同处理状态下的交通事件
const handleClick = (tab) => {
  currentPage.value = 1
  pageSize.value = 5
  getEventsChecked(tab.paneName, currentPage.value, pageSize.value)
}

// 分页获取指定处理状态下已审核的交通事件并渲染到表格
const getEventsChecked = async (status, pages, num) => {
  const res = await eventApi.getEventLimitChecked(
    'event_status',
    status,
    pages,
    num
  )
  GridData.value = res.result.data
  pageTotal.value = res.result.total
}

// 获取所有处理状态下已审核的交通事件数量
const getEventStatusTotal = async () => {
  const res = await eventApi.getEventStatusNum()
  GridTotal.value = res.result.data
}

// 分页器处理函数
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  getEventsChecked(activeStatus.value, currentPage.value, val)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  getEventsChecked(activeStatus.value, val, pageSize.value)
}

onMounted(() => {
  getEventsChecked(activeStatus.value, 1, 5)
  getEventStatusTotal()
})
</script>
<style scoped></style>
